<template>
		<view class="pub-contact" :style="{paddingBottom:128 + bottomHight +'rpx' }">
			<view class="contact-box">
				<view >
					<view v-for="(item, index) in list" :key="index" class="lianxiInfo">
						<view class="contact-left">
							{{item.name}}
						</view>
						<view class="contact-right">
							<view class="tel">
								{{item.tel}}
							</view>
							<u-button iconColor="#2F6DFE" color="#2F6DFE" text="拨打" plain
								:customStyle="{width:'80rpx',height:'40rpx',padding:'0',marginRight:'20rpx'}"
								@click="makePhoneCall(item.tel)"></u-button>
							<image src="https://img.bidcenter.com.cn/uni/home/gengduo.png" mode="" class="showIcon"
								@click="clickPopup(index)">
							</image>
						</view>

						<!-- 弹窗 -->
						<view class="popup-content" :class="{'showRight':index === currentIndex}">
							<view class="popup-title" @click="copyTel(item.tel)">复制电话</view>
							<view class="popup-body" @click="addPhone(item.name,item.tel)">添加到通讯录</view>
							<view class="popup-call" @click="hidePopup">取消</view>
						</view>

					</view>
				</view>

				<list-loading :status.sync="status" :isBottom.sync="qyxxkIsbottom" :defindNull="!list.length"
					:listdata="list" :style="{paddingBottom:148 + bottomHight +'rpx' }" >
					<view class="nullWrap">
						<image src="https://img.bidcenter.com.cn/uni/zanwushuju.png" mode="aspectFit"
							>
						</image>
					</view>
				</list-loading>
				<!-- <view v-else style="padding: 200rpx 0; text-align: center;color: #606266;font-size: 28rpx;">
				暂无联系方式
			</view> -->
			</view>
			
			<!-- 遮罩层 -->
			<view v-show="maskPop" class="popup"></view>

		</view>
		<!-- listloading组件 -->
		
	

</template>

<script>
	export default {
		name: "Qiyexinxiku",
		props: [ 'ids', 'type', 'yzquickjiami', "bottomHight", "qyxxkIsbottom"],
		data() {
			return {
				location:10902,
				// initForm: JSON.parse(JSON.stringify(this.$props.qyxxkForm)),
				maskPop: false,
				currentIndex: -1,
				page: 1,
				pagesize: 40,
				list: [],
				phoneNumber: "",
				company: "",
				status: 'loading',
				nomoreText: '已全部加载完毕',
			};
		},

		watch: {
			qyxxkIsbottom: {
				handler(a, b) {
					// console.log(121212, a !== b && a)
					if (a !== b && a) {
						if(!this.list.length){
							this.$emit('update:qyxxkIsbottom',false)
							return
						}
						if (this.list.length < 10) {
							return
						}
						if (this.status !== 'nomore') {
							if (this.yzquickjiami) {
								this.getGongchengPhone({
										page: ++this.page
									},
									true
								);
							} else {
								this.getLianxiPhone({
										page: ++this.page
									},
									true
								);
							}
						}
						// console.log(121212,a,b)
					}
				},
				immediate: true
			}
		},
		async mounted() {
			this.status="loading"
			this.nomoreText= '已全部加载完毕',
			// console.log(this.type, this.ids, this.yzquickjiami)
		

			//标讯使用id进行查询，工程使用业主加密名称查询，这里用了两个不同的接口，默认from为biaoxun。
			this.$nextTick(() => {
				if (this.yzquickjiami) {
					this.getGongchengPhone()
				} else {
					this.getLianxiPhone();
				}
			})

		},
		computed: {
			popupStyle() {
				return {
					left: `${this.popupX}px`,
					top: `${this.popupY}px`
				};
			}
		},

		methods: {
			clickPopup(index) {
				this.currentIndex = index;
				this.maskPop = true;
			},

			hidePopup() {
				this.maskPop = false;
				this.currentIndex = -1;
			},

			// 拨打电话
			makePhoneCall(tel) {
				uni.makePhoneCall({
					phoneNumber: tel,
				});
			},

			// 复制电话号码
			copyTel(tel) {
				uni.setClipboardData({
					data: tel,
					success: () => {
						this.currentIndex = -1;
						this.maskPop = false
					}

				})
			},

			// 添加到通讯录
			addPhone(name, tel) {
				uni.addPhoneContact({
					firstName: name,
					mobilePhoneNumber: tel,
					success: function (e) {
						uni.$u.toast('添加成功');
					},
					fail: function (e) {
						uni.$u.toast('添加失败');
					}
				})
			},

			// 获取标讯联系方式列表
			getLianxiPhone(params = {}, loadmore) {
				if (!loadmore) {
					this.status = 'loading';
					this.nomoreText = "努力加载中..."
					this.list = [];
					// document.documentElement.scrollTop = 0;
				}
				const paramsNew = Object.assign({}, {
						location: 10869,
						id: this.ids,
						type: this.type,
						page: this.page,
						pagesize: this.pagesize,
					},
					params
				);
				uni.$u.http
					.post('zhaobiao/GetContactHandler.ashx', paramsNew)
					.then(rs => {
						const dt = rs.list || [];

						if (!dt.length) {
							this.status = 'nomore'
							this.nomoreText = loadmore ? '已全部加载完毕' : '暂无数据'
							this.$emit('update:qyxxkIsbottom',false)
						} else {
							// debugger
							if (dt.length < this.pagesize) {
								this.status = 'nomore'
								this.nomoreText = '已全部加载完毕'
							} else {
								this.status = 'loading'
								this.$emit('update:qyxxkIsbottom',false)
							}
						}
						dt.map(item => {
							this.list.push(item)
						})
					})
			},

			//工程页查询联系方式
			getGongchengPhone(params = {}, loadmore) {
				if (!loadmore) {
					this.status = 'loading';
					this.nomoreText = "努力加载中..."
					this.list = [];
					// document.documentElement.scrollTop = 0;
				}
				const paramsNew = Object.assign({}, {
						location: 10869,
						jiamicompany:this.yzquickjiami,
						page: this.page,
						pagesize: this.pagesize,
					},
					params
				);
				uni.$u.http
					.post('/zhaobiao/GetContactByCompanyNameHandler.ashx', paramsNew)
					.then(rs => {
						const dt = rs.list || [];
						
						if (!dt.length) {
							this.status = 'nomore'
							this.nomoreText = loadmore ? '已全部加载完毕' : '暂无数据'
							this.$emit('update:qyxxkIsbottom',false)
						} else {
							// debugger
							if (dt.length < this.pagesize) {
								this.status = 'nomore'
								this.nomoreText = '已全部加载完毕'
							} else {
								this.status = 'loading'
								this.$emit('update:qyxxkIsbottom',false)
							}
						}
						dt.map(item => {
							this.list.push(item)
						})
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.popup-content {
		width: 240rpx;
		background-color: #fff;
		border-radius: 10rpx;
		flex-direction: column;
		justify-content: space-between;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 9999;
		display: none;

		view {
			line-height: 40rpx;
		}
	}

	.popup-title {
		font-size: 32rpx;
		text-align: center;
		padding: 29rpx 0;
		border-bottom: 1px solid #EEEEEE;
	}

	.popup-body {
		font-size: 32rpx;
		text-align: center;
		padding: 29rpx 0;
		border-bottom: 1px solid #EEEEEE;
	}

	.popup-call {
		font-size: 32rpx;
		color: #ADB4C2;
		text-align: center;
		padding: 29rpx 0;
	}

	.pub-contact {

		// margin-bottom: 128rpx;
		padding: 20rpx 28rpx;
		background-color: #FAFAFA;

		.contact-box {
			min-height: calc(100vh - 600rpx);
			background: #fff;
			padding-bottom:20rpx;
			.lianxiInfo {
				line-height: 98rpx;
				padding: 0 24rpx;
				border-bottom: 1rpx solid #eee;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;

				.contact-left {
					color: #3B3E45;
					font-size: 28rpx;
				}

				.contact-right {
					display: flex;
					align-items: center;

					.tel {
						color: #3B3E45;
						font-size: 28rpx;
						margin-right: 20rpx;
					}

					.btn {}

					.showIcon {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.showRight {
				display: block;
			}
		}
	}

	.module-Info {
		width: 660rpx;
		height: 100rpx;
		background-color: #F6F8FF;
		margin: 20rpx auto;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		border-radius: 10rpx;

		.module-left {
			display: flex;
			align-items: center;

			.module-tag {
				//width: 120rpx;
				padding: 0rpx 20rpx;

				::v-deep.u-tag--primary--plain {
					border-width: 1px;
					border-color: #3c9cff;
					justify-content: center;
					//margin-right: 10rpx !important;
				}

				text {
					width: 100%;
					text-align: center;
				}
			}

			.companyName {
				color: #3B3E45;
				font-size: 24rpx;
				line-height: 100rpx;
			}
		}

		// .module-right {
		// 	margin-top: 39rpx;
		// 	margin-right: 20rpx;
		// }
		.u-loadmore {
			margin: 40rpx 0;
		}
	}
</style>